<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-button type="primary" @click="getPayHtml">跳往支付页</el-button>
                <el-button type="primary" @click="getPayQrCode">显示付款码</el-button>
                <el-button type="primary" @click="refund">退款</el-button>
                <p></p>
                <iframe :srcdoc="QrCode" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"
                    width="300" height="300" style="overflow:hidden;">
                </iframe>
                <img id="qrious"/>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            qrCode: null
        }
    },
    methods: {
        displayQRCode() {
            this.$refs.qrCodeFrame.src = this.qrCodeHtml;
        },
        getPayHtml() {
            this.$axios.post("/api/staffOrder/alipay/getPayHtml?orderNum=6666").then(response => {
                // this.$refs.formContainer.innerHTML = response.data

                const divForm = document.getElementsByTagName("div");
                if (divForm.length) {
                    document.body.removeChild(divForm[0]);
                }
                const div = document.createElement("div");
                div.innerHTML = response.data; // data就是接口返回的form 表单字符串
                document.body.appendChild(div);
                document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转
                document.forms[0].submit();
            });
        },

        getPayQrCode() {
            this.$axios.post("/api/staffOrder/alipay/getPayQrCode?orderNum=6666").then(response => {
                let resp = response.data;
                if (resp.code == 200){
                    //二维码
                    qr = new QRious({
                        element:document.getElementById('qrious'),
                        size:250,
                        level:'H',
                        value:resp.qrcode
                    });
                }
            });
        },

        refund() {
            this.$axios.post("/api/staffOrder/alipay/refund?orderNum=6666666&totalPrice=100").then(response => {
                let resp = response.data;
                if (resp.code == 200) {
                    this.$message({
                        message: resp.msg,
                        type: "success"
                    });
                }
            });
        }
    },
    created() { },
    mounted() { }
}
</script>

<style scoped></style>